<template>
  <div>
    <div class="text-right">
      <el-button size="small" class="mb-2 d-print-none" @click="handlePrint">
        <i class="fa fa-print"></i>
        打印
      </el-button>
    </div>
    <div :id="printId">
      <table class="table table-bordered vertical-align-middle text-center">
        <tbody>
          <tr>
            <td colspan="6" class="text-center border-0">
              <h5 class="m-0">放款审批申请表</h5>
            </td>
          </tr>
          <tr>
            <td>客户名称</td>
            <td colspan="2">{{ related.customer_name }}</td>
            <td>客户类型</td>
            <td colspan="2">{{ orgClassName }}</td>
          </tr>
          <tr>
            <td>担保额度</td>
            <td colspan="2">{{ entrustContract.reply_funds }}万元</td>
            <td>担保期限</td>
            <td colspan="2">{{ entrustContract.load_years }}月</td>
          </tr>
          <tr>
            <td>担保费率</td>
            <td colspan="2">{{ entrustContract.gua_rate || '-' }}%</td>
            <td>合同期间</td>
            <td colspan="2">{{ loadPeriod }}</td>
          </tr>
          <tr>
            <td>放款机构</td>
            <td colspan="2">{{ entrustContract.bank_name || '-' }}</td>
            <td>放款利率</td>
            <td colspan="2">{{ entrustContract.load_rate || '-' }}%</td>
          </tr>
          <tr>
            <td>本次放款金额</td>
            <td colspan="2">{{ entrustContract.reply_funds || '-' }}</td>
            <td>累计放款金额</td>
            <td colspan="2">{{ entrustContract.reply_funds || '' }}</td>
          </tr>
          <tr>
            <td>反担保方案落实情况</td>
            <td colspan="5" class="text-left">
              <div class="text-indent">{{ approval.gua_method_impl }}</div>
            </td>
          </tr>
          <tr>
            <td>业务落实情况</td>
            <td colspan="5" class="text-left">
              <div class="text-indent px-4 py-2">
                客户资料已按要求进行收集,相关合同已签署。已缴纳担保费
                <span class="text-decoration px-1">{{ approval.pay_gua_fee || '-' }}</span>
                元。 同意办理。
              </div>
              <div class="d-flex justify-content-between px-4">
                <div class="flex-1">农业担保部项目经理A角： {{ related.res_a_name }}</div>
                <div class="flex-1">农业担保部项目经理B角： {{ related.res_b_name }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>有权审批人</td>
            <td colspan="5">
              <div class="text-indent">{{ approval.res_corp_option }}</div>
              <sign-panel
                direction="column"
                :approval="approval"
                :sign-name="[{ label: '签字', key: 'res_corp_person' }]"
                sign-date="res_corp_date"
              ></sign-panel>
            </td>
          </tr>
          <tr>
            <td>省农担意见</td>
            <td colspan="5">
              <div v-for="(r, index) of records" :key="index" class="p-item">
                <record-item :record-data="r"></record-item>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { getApproval } from '@/credit/views/county/unionProvince/components/loanApprove/index'
import { getRelated } from '@/credit/views/county/unionProvince/components/contractApprove/index'
import { printA4 } from '@vimi/utils-tool'
import { enumCompanyType } from '@/gov/plugins/enum'
import SignPanel from '@/credit/views/county/unionProvince/components/loanApprove/SignPanel'
import { mapGetters } from 'vuex'
import RecordItem from '@/credit/views/county/unionProvince/components/projectApprove/RecordItem'
export default {
  components: {
    SignPanel,
    RecordItem,
  },
  props: {
    queryId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      approval: {},
      related: {},
      records: [],
    }
  },
  watch: {
    queryId: {
      handler: function () {
        this.getProvinceOption()
        this.getData()
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['user', 'entrustContract']),
    isProvince() {
      return +this.user.orgRegionLever === 1
    },
    printId() {
      return `loan-approve-${this.queryId}`
    },
    loadPeriod() {
      return (
        (this.entrustContract.load_date || '- ') +
        '至' +
        (this.entrustContract.load_end_date || ' -')
      )
    },
    // 客户类型
    orgClassName() {
      return enumCompanyType[this.related.org_class] || ''
    },
  },
  created() {},
  methods: {
    getProvinceOption() {
      const key = 'LOAD_APPROVAL'
      this.$api
        .getData(this.$serviceName, 'workflow_record', {
          'workflow_key.eq': key,
          'task_id.eq': `''`,
          'wf_related_id.eq': this.queryId,
        })
        .then(res => {
          const data = res?.data ?? []
          this.records = data.map(this.dataAdaptor)
        })
    },
    dataAdaptor(item) {
      item.dateStr = this.$utils.dateFormat(item.approval_time, 'yyyy年MM月dd日')
      return item
    },
    getData() {
      const { queryId } = this
      if (!queryId) {
        return
      }
      this.loading = true
      return Promise.all([
        getRelated(queryId),
        getApproval(queryId),
        this.$store.dispatch('getEntrustContract', queryId),
      ])
        .then(([related, approval]) => {
          this.related = related
          this.approval = approval
        })
        .finally(() => {
          this.loading = false
        })
    },
    handlePrint() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        .vertical-align-middle td {vertical-align: middle;}
        .text-indent { text-align: left;text-indent: 2rem; min-height: 7rem;}
      `
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.text-indent {
  text-align: left;
  text-indent: 2rem;
  min-height: 3rem;
}
</style>
